<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色列表</title>
    <%include("/WEB-INF/views/common/basejs.html"){}%>
    <link rel="stylesheet" href="${ctxPath!}/css/admin.css" media="all">
    <!--行级别工具栏模板-->
    <script type="text/html" id="rowTool">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="grant">授权</a>
            <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        </div>
    </script>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="delAll">删除</button>
        </div>
    </script>
    <script>
        var $;
        var listTable;
        var listTableObj;
        var layer;
        var addPageIndex;//添加页面索引
        var editPageIndex;//编辑页面索引
        var grantPageIndex;
        var tableId='listTable';
        var queryForm;
        layui.use(['table','layer','jquery','form'],function(){
            listTable = layui.table;
            layer=layui.layer;
            $=layui.jquery;
            queryForm=layui.form;
            //查询表单点击查询事件
            queryForm.on('submit(queryForm)',function(data){
                var param=getCommonQueryData(data.field);
                listTableObj.reload({
                    where: param
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false;
            });
            $(function(){
                //初始化表格
                initTableData();
                //初始化工具栏
                initTableToolBar();
            })
        });
        //初始化表格数据
        function initTableData(){
            listTableObj=listTable.render({
                elem:'#listTable'
                ,toolbar:'#toolbar'
                ,url:basePath+'/role/getList?paging=true'
                ,page:true
                ,cols:[[ //表头
                    {type:'checkbox',fixed:'left'}
                    ,{field: 'roleName',title:'角色名称'}
                    ,{field: 'sort',title:'排序值'}
                    ,{field: 'createTime',title:'创建时间'}
                    , {field: 'status', title:'角色状态',
                        templet:function(obj){
                            if(obj.status==1){
                                return '<span class="layui-btn layui-btn-sm layui-btn-normal">有效</span>';
                            }else{
                                return '<span class="layui-btn layui-btn-sm layui-btn-danger">冻结</span>';
                            }
                        }
                    }
                    ,{fixed:'right', width:178, align:'center',toolbar:'#rowTool'}
                ]]
            });
        }
        //监听行级表格工具栏事件
        function initTableToolBar(){
            //行级别数据操作监听
            listTable.on('tool(toolbar)',function(obj){
                var id=obj.data.id;
                switch(obj.event){
                    case 'grant':
                        grantPage(id);
                        break;
                    case 'delete':
                        layer.msg('待开发');
                        del(obj);
                        break;
                    case 'update':
                        editPage(id);
                        break;
                };
            });
            //表级别数据操作监听
            listTable.on('toolbar(toolbar)',function(obj){
                switch(obj.event){
                    case 'add':
                        addPage();
                        break;
                    case 'delAll':
                        layer.msg('删除所有');
                        break;
                };
            });
        }
        function del(obj){
            layer.confirm("你确定删除数据吗？", {icon: 3, title:'提示'},
                function(index){//确定回调
                    $.ajax({
                        url:basePath+'/role/delete',
                        type:'post',
                        data:{ids:obj.data.id},
                        dataType:'json',
                        success:function(data){
                            if(data.code==0){
                                obj.del();
                                layer.close(index);
                            }
                            layer.msg(data.msg);
                        },
                        error:function(){
                            layer.close(index);
                            layer.msg("删除节点失败,系统内部错误");
                        }
                    });
                    console.log(obj);

                },function (index) {//取消回调
                    layer.close(index);
                }
            );
        }
        //弹出新增资源页面
        function addPage(){
            addPageIndex=layer.open({
                title:'角色添加',
                type: 2,
                content:basePath+'/role/addPage',
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['添加', '取消']
                ,yes: function(index, layero){
                    var submit = layero.find('iframe').contents().find("#form-submit");
                    submit.click();
                }
            })
        }
        function editPage(id){
            editPageIndex=layer.open({
                title:'角色编辑',
                type: 2,
                content:basePath+'/role/editPage?id='+id,
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['编辑', '取消']
                ,yes: function(index, layero){
                    var submit = layero.find('iframe').contents().find("#form-submit");
                    submit.click();
                }
            })
        }
        function grantPage(id){
            grantPageIndex=layer.open({
                title:'角色分配资源',
                type: 2,
                content:basePath+'/role/grantPage?id='+id,
                area: ['600px', '400px'],
                maxmin:true
            })
        }
        //表格重新加载
        function query(){
            listTable.reload(tableId);
        }
        //关闭添加页面
        function closeAddPage(){
            layer.close(addPageIndex);
        }
        //关闭编辑页面
        function closeEditPage(){
            layer.close(editPageIndex);
        }
        function closeGrantPage(){
            layer.close(grantPageIndex);
        }
    </script>
</head>
<body class="layui-layout-body">
    <div class="layui-fluid">
        <div class="layui-card">
            <!--查询form区域-->
            <form id="queryForm" class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">角色名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="role_name" placeholder="请输入" autocomplete="off" class="layui-input" operator="like">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit="" lay-filter="queryForm">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                    </div>
                </div>
            </form>
            <!--查询内容-->
            <div class="layui-card-body">
                <table id="listTable" lay-filter="toolbar"></table>
            </div>
        </div>
    </div>
</body>
</html>